<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<style>
  .el-header {
    width: 100%;
    height: 200px;
    background-color: #009edc;
  }
</style>
<body>
<div id="app">

  <el-container>
    <el-header>
      <div>
      <h1 style="text-align: center;margin-top: 13px">美容院管理系统
        <a href="" style="float: right; text-decoration: none ;font-size: 15px;margin-right: 20px;margin-top: 8px;color: black">退出登录</a>
        <a href="" style="float: right; text-decoration: none ;font-size: 15px;margin-right: 20px;margin-top: 8px;color: black">退出到前台</a>
      <span style="font-size: 20px;float: right;margin-right: 20px;;margin-top: 5px">管理员XXX</span>
      </h1>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px" style="overflow: hidden">
        <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                background-color="rgba(0, 176, 220, 0.92)"
                text-color="black"
                @open="handleOpen"
                @select="handleSelect"
                @close="handleClose">
          <el-menu-item index="1">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span>个人中心</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-release"></i>
              <span>普通用户管理</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-cooperation"></i>
              <span>会员管理</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>技师管理</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>前台管理</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="7">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>美容用户管理</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="8">
            <template slot="title">
              <i class="el-icon-folder"></i>
              <span>美容项目管理</span>
            </template>
            <el-menu-item index="8-1">美容项目</el-menu-item>
          </el-submenu>

          <el-submenu index="9">
            <template slot="title">
              <i class="el-icon-folder"></i>
              <span>预约信息管理</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="10">
            <template slot="title">
              <i class="el-icon-folder"></i>
              <span>美容部位管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="10-1">美容部位</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="11">
            <template slot="title">
              <i class="el-icon-folder"></i>
              <span>销量信息管理</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="12">
            <template slot="title">
              <i class="el-icon-folder-opened"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="13">
            <template slot="title">
              <i class="el-icon-folder-opened"></i>
              <span>订单管理</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
            </el-menu-item-group>
          </el-submenu>

          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>Main</el-main>
    </el-container>
  </el-container>




</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {

      }
    },
   methods:{
     handleOpen(key, keyPath) {
       console.log(key, keyPath);
     },
     handleClose(key, keyPath) {
       console.log(key, keyPath);
     },
     handleSelect(key,keyPath){
       if(key=='8-1'){
         location.href="/beautyBodyPosition.html";
       }

     }
   }
  })
</script>
</html>